<template>
  <div class="flex-1 h-full">
    <div class="echarts h-full">
      <ECharts
        v-if="option"
        :option="option"
        :id="`black-piece-yield-bar` + props.id"
        ref="lineEChartsRef"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import { useRoute } from "vue-router";
import * as echarts from "echarts/core";
// import { isDarkMode } from "@/utils/index";
const routeName = useRoute().name;
const emit = defineEmits(["deletePanelItemEvent"]);

function isDarkMode(params: string) {
  return true;
}

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  xUnit: {
    type: String,
    default: () => {
      return "月";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
  second: {
    type: Number,
    default: () => {
      return 1000 * 60 * 10;
    },
  },
});
const { panelSetIcon, id, url, title, xUnit, second } = toRefs(props);

const reportData = ref();

const searchParam = reactive({
  year: dayjs().year().toString(),
});

async function handleSearch() {
  reportData.value = null;
  loading.value = true;
  const { data } = await request({
    url: `/mes/mesblackpieceweightrecord/getList`,
    method: "post",
    data: {
      planYear: searchParam.year,
    },
  }).finally(() => {
    loading.value = false;
  });

  let result = {
    xdata: [],
    ydata: [],
  };

  if (data.length === 0 || !data) {
    result.xdata = [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "10",
      "11",
      "12",
    ];
  } else {
    data?.map((e) => {
      result.xdata.push(e.planMonth);
      result.ydata.push(e.actualWeight);
    });
  }
  reportData.value = result ?? {};

  // setTimeout(() => {
  //   reportData.value = {
  //     xdata: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
  //     ydata: [100, 200, 300, 400, 300, 600, 400, 200, 300, 0, 0, 0],
  //   };
  // }, 500);
}
const currentProcess: any = ref([]);
const locationStatistics: any = ref([]);
const loading = ref(false);
const processId = ref();

const option = ref();
watch(
  () => reportData.value,
  (newValue) => {
    if (newValue) {
      const list: any = {
        //   animation: true, //控制动画示否开启
        //   animationDuration: 3000,
        title: {
          text: "",
          x: "center",
          y: "15",
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: isDarkMode(routeName) ? "rgba(0,0,0,.5)" : "#FFF",
          borderColor: "transparent",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: isDarkMode(routeName)
                ? "rgba(0,0,0,.5)"
                : "#FFF",
              fontFamily: "DINLight",
              color: isDarkMode(routeName) ? "#FFF" : "#666",
            },
          },
          textStyle: {
            color: isDarkMode(routeName) ? "#FFF" : "#666",
            fontFamily: "DINLight",
            fontSize: 14,
          },
          formatter: (params: any) => {
            var relVal = params[0].name + xUnit.value;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +=
                "<br/>" + params[i].marker + " " + params[i].value || "-";
            }
            return relVal;
          },
        },
        grid: {
          top: "11%",
          right: "4%",
          left: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            name: "",
            data: newValue?.xdata ?? [],
            axisLine: {
              onZero: true,
              rotate: 30, //坐标轴内容过长旋转
              interval: 1,
              lineStyle: {
                color: "#cdd5e2",
              },
            },
            axisLabel: {
              color: isDarkMode(routeName) ? "#eeeeee" : "#666",
              fontSize: 13,
              // 使用 formatter 函数添加后缀
              formatter: function (value) {
                return xUnit.value ? value + xUnit.value : value; // 这里的 '单位' 是你想要添加的后缀
              },
            },
            axisTick: {
              show: true,
            },
          },
        ],
        yAxis: [
          {
            name: "",
            axisLabel: {
              formatter: "{value}",
              color: isDarkMode(routeName) ? "#eeeeee" : "#666",
              fontSize: 13,
              // lineHeight: 30,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: isDarkMode(routeName)
                  ? "rgba(255,255,255,.1)"
                  : "rgba(0,0,0,.1)",
                type: "dashed",
              },
            },
          },
        ],

        series: [
          {
            name: "",
            type: "bar",
            data: newValue?.ydata ?? [],
            barWidth: "20px",
            itemStyle: {
              color: "rgb(36,120,242)",
            },
            label: {
              show: true,
              fontSize: 13,
            },
          },
        ],
      };

      option.value = list;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

// 定时刷新
let timer: any = ref(null);

// 大屏切换处理方法
function handleScreenData() {
  clearInterval(timer.value);
  timer.value = null;

  timer.value = setInterval(() => {
    handleSearch();
    // 重复调用组件的重新获取方法
  }, second.value);
}

onMounted(() => {
  handleSearch();
  handleScreenData();
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss" scoped></style>
